<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8" />
        <title>Use require.js - Editor.md examples</title>
        <link rel="stylesheet" href="css/style.css" />
        <link rel="stylesheet" href="../lib/codemirror/codemirror.min.css" /> 
        <link rel="stylesheet" href="../dist/css/editormd.min.css" />
    </head>
    <body>
        <div id="layout">
            <header>
                <h1>Use require.js</h1>           
            </header>
            <div class="btns">
                <button id="show-btn">显示编辑器</button>
                <button id="hide-btn">隐藏编辑器</button>
                <button id="get-md-btn">获取Markdown(源码)</button>
                <button id="get-html-btn">获取HTML(源码)</button>
                <button id="watch-btn">开启实时预览</button>
                <button id="unwatch-btn">关闭实时预览</button>
                <button id="preview-btn">预览HTML(按ESC取消)</button>
                <button id="fullscreen-btn">全屏(按ESC取消)</button>
                <button id="show-toolbar-btn">显示工具栏</button>
                <button id="close-toolbar-btn">关闭工具栏</button>
            </div>
            <div id="test-editormd"></div>
        </div>   
        <script src="js/require.min.js"></script>
        <script type="text/javascript">            
            requirejs.config({
                baseUrl: "../lib/",
                paths: {
                    jquery   : "../examples/js/jquery.min",
                    marked   : "marked.min",
                    prettify : "prettify.min",
                    raphael  : "raphael.min",
                    editormd : "../src/js/editormd"
                },
                waitSeconds: 30
            });

            require(["jquery", "marked", "prettify", "editormd", "../src/js/languages/en", "raphael", "underscore.min", "flowchart.min", "jquery.flowchart.min", "sequence-diagram.min"], function($, marked, prettify, editormd) {
                var testEditor;
                
                require([editormd.katexURL.js + ".js"], function(katex) {
                    require(editormd.requireModules(), function(CodeMirror) {
                        //console.log(CodeMirror, marked, katex); 

                        editormd.requirejsInit(CodeMirror, marked, katex, prettyPrint);

                        $.get('test.md', function(md) {
                            testEditor = editormd("test-editormd", {
                                width: "90%",
                                height: 640,
                                path : '../lib/',
                                markdown : md,
                                saveHTMLToTextarea : true,    // 保存HTML到Textarea
                                htmlDecode : true,            // 开启HTML标签解析，为了安全性，默认不开启    
                                tex : true,
                                previewCodeHighlight : true,
                                inRequirejs : true,           // must set true
                                flowChart : true,
                                sequenceDiagram : true,
                                //dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为true
                                //dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
                                //dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为true
                                //dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为0.1
                                //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
                                imageUpload : true,
                                imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                                imageUploadURL : "./php/upload.php",
                                onload : function() {
                                    console.log('onload', this);
                                    //this.fullscreen();
                                    //this.unwatch();
                                    //this.watch().fullscreen();

                                    //this.setMarkdown("#PHP");
                                    //this.width("100%");
                                    //this.height(480);
                                    //this.resize("100%", 640);
                                }
                            });
                        });
                    });
                });
                
                $("#show-btn").bind('click', function(){
                    testEditor.show();
                });
                
                $("#hide-btn").bind('click', function(){
                    testEditor.hide();
                });
                
                $("#get-md-btn").bind('click', function(){
                    alert(testEditor.getMarkdown());
                });
                
                $("#get-html-btn").bind('click', function() {
                    alert(testEditor.getHTML());
                });                
                
                $("#watch-btn").bind('click', function() {
                    testEditor.watch();
                });                 
                
                $("#unwatch-btn").bind('click', function() {
                    testEditor.unwatch();
                });              
                
                $("#preview-btn").bind('click', function() {
                    testEditor.previewing();
                });
                
                $("#fullscreen-btn").bind('click', function() {
                    testEditor.fullscreen();
                });
                
                $("#show-toolbar-btn").bind('click', function() {
                    testEditor.showToolbar();
                });
                
                $("#close-toolbar-btn").bind('click', function() {
                    testEditor.hideToolbar();
                });
            });
        </script>
    </body>
</html>